<template>


  <div v-if="team">

    <div class="center">
      <img :alt="team.name" class="img" :src="team.teamAvatarUrl?team.teamAvatarUrl:defaultPicture">
    </div>

    <van-divider>{{ team.name }}</van-divider>


    <van-cell  center :value="team.name" icon="award-o">
      <template #title>
        <span class="custom-title">队伍名称</span>
      </template>
    </van-cell>

    <van-cell  center :value="team.id" icon="points">
      <template #title>
        <span class="custom-title">队伍ID</span>
      </template>
    </van-cell>
    <van-cell  center :value="team.hasJoinNum+'/'+team.maxNum " icon="friends-o">
      <template #title>
        <span class="custom-title">队伍人数</span>
      </template>
    </van-cell>

    <van-cell :value="createUser.username" center icon="manager-o">
      <template #title>
        <span class="custom-title">队长</span>
      </template>
    </van-cell>

    <van-cell :value="team.description" center icon="label-o">
      <template #title>
        <span class="custom-title">队伍描述</span>
      </template>
    </van-cell>

    <van-cell is-link @click="toChat" center icon="chat-o">
      <template #title>
        <span class="custom-title">队伍聊天室</span>
      </template>
    </van-cell>

    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">队员
    </van-divider>

    <div style="margin-bottom: 10px"></div>
    <div v-if="!userVOList||userVOList.length <=0" class="null">
      <van-empty image="search" description="暂无数据"/>
    </div>
    <div v-if="userVOList.length >0 && userVOList">
      <div v-for="user in userVOList" id="card" class="card">
        <van-swipe-cell>
          <van-card
              :desc="user.profile ?'简介：'+ user.profile:'简介：该用户比较懒,暂时没有设置'"
              :thumb="user.avatarUrl ? user.avatarUrl :defaultPicture "
              :title="user.username"
              @click="showUser(user.id)"
          >
            <template #tags>
              <van-tag v-for="tag in user.tags" style="color: rgb(245, 67, 67)" class="tag" plain type="primary">
                {{ tag }}
              </van-tag>
            </template>
          </van-card>

          <template #right>
            <van-button v-if="user.id!==loginUser.id" class="delete-button child" square text="添加好友" type="primary"
                        @click="addUser"/>
            <!--当前用户是管理员或者是队伍的创建者-->

            <span v-if="loginUser.userRole===1||team.createUser.id ===loginUser.id">
          <span v-if="user.userRole!==1&&user.id!==loginUser.id">
              <van-button square text="踢出队伍"
                          class="delete-button child" type="danger" @click="kickOut(user.username,user.id)"/>
            </span>
          </span>
          </template>
        </van-swipe-cell>
        <div style="padding-top: 5px"></div>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";
import myAxios from "../plugins/myAxios.ts";
import {defaultPicture, jsonParseTag} from "../common/userCommon.ts"
import {UserType} from "../models/user";
import {getCurrentUser} from "../services/user";
const router = useRouter();
const team = ref();

const route = useRoute();
const Id  = route.query.id;
const loginUser = ref({})
const createUser = ref()
const userVOList = ref<UserType[]>([])

onMounted(async ()=>{

  const  res = await  getCurrentUser();
  if (res){
    loginUser.value =res;
  }else {
    showFailToast('获取用户信息失败');
  }
  const userTeamVO = await myAxios.get('/team/queryTeamInfo',{
    params: {
      Id
    }
  });

  if (userTeamVO) {
    team.value = userTeamVO?.data
    createUser.value = userTeamVO?.data?.createUser
    userVOList.value = userTeamVO?.data?.userVOList
  }
  jsonParseTag(userTeamVO.data.userVOList)
  loginUser.value.tags = JSON.parse(loginUser.value.tags);

  // console.log("----userTeamVO?.data?.createUser:----",userTeamVO?.data?.createUser);
  // console.log("----team:----",team.value);
  // console.log("----createUser:----", createUser.value);
  // console.log("----userVOList:----", userVOList.value);



})



const showUser =  ( id:number) =>{
  router.push({
    path: '/user/show',
    query: {
      id,
    }
  })
}

const addUser = () => {
  showSuccessToast('添加');
}

const kickOut = (username: string, userId: number) => {
  showConfirmDialog({
    title: "踢出队伍",
    message:
        '是否踢出该队员：' + username + '！',
  })
      .then(async () => {
        const kickOutUser = await myAxios.post(`/team/kickOutUser`, {
          teamId: teamId,
          userId: userId
        })
        if (kickOutUser) {
          showSuccessToast("踢出成功")
          userVOList.value = userVOList.value.filter(user => user.id !== userId)
        }
      })
}

const toChat = () => {
  router.push({
    path: "/chat",
    query: {
      teamId: team.value.id,
      teamName: team.value.name,
      teamType: 2
    }
  })
}

</script>

<style scoped>
@import "../assets/css/public.css";
@import "../assets/css/userPage.css";
@import "../assets/css/userList.css";

</style>
